import { ref } from 'vue';
import { getGlobalMap } from '@/components/GlobalMap';
import { pickFeaturesPopover, pickFeaturesByName } from 'gmap-ol';
import { useStationDataStoreWithOut } from '@/store/modules/stationData';

const pickFeatures = ref<any[] | null | undefined>(null);

const stationDataStore = useStationDataStoreWithOut();

export function useOlMapEvent() {
  const olMap: any = getGlobalMap();

  // 地图触摸事件
  olMap.on('pointermove', async (event) => {
    pickFeatures.value = [];
    // 触摸站点，获取站点数据
    const pickFeaturesData = await pickFeaturesByName(event, 'PointLayer');
    //console.log('pickFeaturesData------------',pickFeaturesData)
    if (pickFeaturesData.length > 0) {
      // 点击清除地图的 Overlay
      // olMap.getOverlays().clear();
      pickFeatures.value = pickFeaturesData;
    }
  });

  // 地图点击事件
  olMap.on('click', async (event: any) => {
    // 清除 Overlay
    const overlayPopup = olMap.getOverlayById('OverlayPopup');
    overlayPopup.setPosition(undefined);
    // 获取范围内的重叠要素数据
    const pickFeaturesData = await pickFeaturesByName(event);
    stationDataStore.setStationData(pickFeaturesData[0]);
  });

  return {
    pickFeatures
  };
}

